<template>
  <div ref="aiMessageItemRef" class=" flex flex-col w-11/12" :class="item.role==='user'?'items-end':''">
    <div class="flex items-center" :class="item.role==='user'?'flex-row-reverse':''">
      <TextIcon v-if="item.role==='user'" icon="mdi:account-tie" :size="30"></TextIcon>
      <TextIcon v-if="item.role==='assistant'" icon="arcticons:ai-chat" :size="30"></TextIcon>
      <div class="text-gray-500">{{ item.role }}</div>
      <div v-if="showOperateButton" class="flex transition-all px-3 space-x-1"
           :class="[isOutside?'opacity-0':'',item.role==='user'?'flex-row-reverse':'']">
        <n-button @click="handleCopy(item.content)" text type="info">
          <TextIcon icon="solar:copy-bold-duotone" tip="复制" :size="22"></TextIcon>
        </n-button>
        <n-button @click="handleEdit" text type="info">
          <TextIcon icon="la:edit" tip="编辑" :size="22"></TextIcon>
        </n-button>
        <n-button @click="handleReload" text type="info">
          <TextIcon icon="ci:arrows-reload-01" tip="重试" :size="22"></TextIcon>
        </n-button>
        <n-button @click="handleRemove" text type="error">
          <TextIcon icon="dashicons:remove" tip="删除" :size="22"></TextIcon>
        </n-button>
      </div>
    </div>

    <div class="border rounded-lg max-w-fit w-full" :class="item.role==='user'?'border-blue-500':''">
      <PreviewMarkdown :content="item.content"></PreviewMarkdown>
    </div>
    <div class="text-gray-500 text-xs">
      {{ item.createdAt }}
    </div>
  </div>
  <AiMessageEditModal ref="aiMessageEditModalRef" @afterLeave="handleEditModalLeave"></AiMessageEditModal>
</template>

<script setup lang="ts">


import {PropType, ref} from "vue";
import PreviewMarkdown from "@/components/common/markdown/PreviewMarkdown.vue";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {useMouseInElement, useClipboard} from "@vueuse/core";
import AiMessageEditModal from "@/components/pc/modal/AiMessageEditModal.vue";

const {copy} = useClipboard()

const props = defineProps({
  item: {
    type: Object as PropType<IAiMessage>,
    required: true
  },
  showOperateButton: {
    type: Boolean,
    default: true
  }
})
const emits = defineEmits(['handleRemove', 'handleReload'])
const aiMessageItemRef = ref()
const aiMessageEditModalRef = ref()
const {isOutside} = useMouseInElement(aiMessageItemRef)

const handleCopy = (val: string) => {
  window.$message.success('复制成功')
  copy(val)
}
const handleRemove = () => {
  emits('handleRemove', props.item)
}
const handleEdit = () => {
  aiMessageEditModalRef.value.doParamsShow(props.item?.content)
}
const handleEditModalLeave = (val: string) => {
  props.item.content = val
}
const handleReload = () => {
  emits('handleReload', props.item)
}
</script>

<style scoped>

</style>